<template>
  <div style="">
      <div style="font-size:13px;">
        <Row>
          <Col :span="5">选择分配条数</Col>
          <Col>
            <Input
              :maxlength="3"
              :on-change="inputForm.quicklySelectCount=inputForm.inputCount"
              v-model="inputForm.inputCount"
              placeholder="请输入分配条数，最高600条"
              style="width: 200px"
              size="small"
            />
          </Col>
        </Row>
        <Row style="margin-top:10px;">
          <Col :span="5">可分配条数</Col>
          <Col>
            <span style="color:#ed4014;">{{assigneRes.count}}</span>
            <span style="margin-left:4px;">条</span>
          </Col>
        </Row>
        <Row style="margin-top:10px;">
          <Col :span="5">快捷选择</Col>
          <Col>
            <RadioGroup
              v-model="inputForm.quicklySelectCount"
              type="button"
              size="small"
              :on-change="selectQuickly()"
            >
              <Radio :label="c" v-for=" c in quicklyCount" :key="c" style="margin-right:4px;"></Radio>
            </RadioGroup>
          </Col>
        </Row>
      </div>
      <div style="margin-top:10px;font-size:13px;">
        <template>
          <Transfer
            :list-style="listStyle"
            :data="data2"
            :titles="['可分配','已选择']"
            :target-keys="targetKeys1"
            filterable
            :render-format="render1"
            @on-change="handleChange1"
          ></Transfer>
        </template>
      </div>
      <div slot="footer">
        <Button type="default" @click="cancel(false)">取消</Button>
        <Button type="primary" 
        :disabled="!checkAssigneDisabled()" @click="saveAssigne">
        确定</Button>
      </div>
  </div>
</template>
<script>
import { post } from "@/libs/axios-cfg";
import { constants } from "crypto";
export default {
  data() {
    return {
      show: true,
      maxCount: 0,
      inputForm:{
          inputCount: null,
          quicklySelectCount:0
      },
      
      quicklyCount: [100, 200, 300, 400, 500, 600],
      data2: [],
      targetKeys1: [],
      listStyle: {
        width: "250px",
        height: "300px"
      },
      assigneRes:[],
      group:{}
    };
  },
  
  methods: {
    getTitleName() {
      return "分配线索:" + this.group.groupName;
    },
    /**
     * @description 关闭Modal
     * @param reload 是否重新加载数据
     */
    cancel(reload = false) {
      this.$emit("cancel");
    },
    selectQuickly(data) {
      this.inputForm.inputCount= this.inputForm.quicklySelectCount*1;
    },
    render1(item) {
      return item.label;
    },
    handleChange1(newTargetKeys, direction, moveKeys) {
      this.targetKeys1 = newTargetKeys;
    },saveAssigne(){
      var url = "/clue/assigne";
      var ps = {
        "ids":this.targetKeys1,
        "count":this.inputForm.inputCount,
        "groupId":this.group.id
        };

          this.post(url, ps, {}).then(res => {
        if (this.checkIsSsuccess(res)) {
          var data = res.data;
          this.maxCount = maxCount-data.successCount;
          this.$Message.success({
            content: "分配成功",
            duration: 2,
            closable: true,
            //  onClose: () => this.cancel()
          });
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 2,
            closable: true,
              onClose: () => this.cancel()
          });
        }
      });
    },
    checkAssigneDisabled(){
      //可分配条数小于0
      if(this.assigneRes.count<=0){
        return false;
      }
      //选择分配坐席数<0
      if(!this.targetKeys1||this.targetKeys1.length<=0){
        return false;
      }
      //输入分配的条数<0
      if(!this.inputForm.inputCount||this.inputForm.inputCount<=0){
        return false;
      } 
      console.log(this.inputForm.inputCount,this.targetKeys1.length);

      //选择分配条数大于可分配条数
      if(this.inputForm.inputCount*this.targetKeys1.length>this.assigneRes.count){
         return false;
      }
      return true;
    }
  },
  created() {
    this.data2 = [];
    this.assigneRes.assigneTos.forEach(element => {
      this.data2.push({ key: element.value, label: element.label });
    });
  }
};
</script>

